<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html { height: 100% }
body{ height: 100%; margin: 0px; padding: 0px;}
/*
#map_canvas { height: 100% }
*/

/*Elementos da estrutura do documento*/
header#cabecalho{background-color:#3333CC; height:40px;}
nav#infousuario{height:30; text-align:right;}
#menu{position:fixed; top:69px; left:0px; width: 50px; height:499px; float:left;background-color:#009999;}
#map_canvas{height:500px; width: 800px; margin:0; padding:0; left:50px;}
#rodape{clear:both; background-color:#CC0000; top:580px;}

/*Mantive a classe shelf aqui para lembrar suas caracteristicas iniciais*/
#shelf{position:fixed; top:10px; left:500px; height:100px;width:200px;background:white;opacity:0.7;}
/*
#menu{position:fixed; top:50px; left:0px; width: 50px; height:400px; float:left;background-color:#009999;}
*/

/*Mantive a classe draggable aqui para lembrar suas caracteristicas iniciais*/
#draggable {position:absolute;top:10px, left:10px; width: 30px; height: 30px;z-index:1000000000;}

#placa {top:10px, left:10px; width: 50px; height: 50px;z-index:1000000000;}
#personagem {top:60px, left:10px; width: 50px; height: 50px;z-index:1000000000;}
#item {top:110px, left:10px; width: 50px; height: 50px;z-index:1000000000;}
#documento {top:160px, left:10px; width: 50px; height: 50px;z-index:1000000000;}

</style>

<script type="text/javascript">
	$(document).ready(function() {
		//Classe draggable - mantive para ver apenas suas caracteristicas iniciais
		$("#draggable").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			placeMarker(ll);
			}
		});
		
		//Classe placa
		$("#placa").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			var latLng = ll.toString().split(',');
			var lat = latLng[0].substring(1, latLng[0].length);
			var lng = latLng[1].substring(0, latLng[1].length - 1);
			insereItemBD(lat, lng, 2);
			placePlaca(ll);
			}
		});
		
		//Classe personagem
		$("#personagem").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			var latLng = ll.toString().split(',');
			var lat = latLng[0].substring(1, latLng[0].length);
			var lng = latLng[1].substring(0, latLng[1].length - 1);
			insereItemBD(lat, lng, 1);
			placePersonagem(ll);
			}
		});
		
		//Classe Item
		$("#item").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			var latLng = ll.toString().split(',');
			var lat = latLng[0].substring(1, latLng[0].length);
			var lng = latLng[1].substring(0, latLng[1].length - 1);
			insereItemBD(lat, lng, 3);
			placeItem(ll);
			}
		});
		
		//Classe Documento
		$("#documento").draggable({helper: 'clone',
		stop: function(e) {
			var point=new google.maps.Point(e.pageX,e.pageY);
			var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
			var latLng = ll.toString().split(',');
			var lat = latLng[0].substring(1, latLng[0].length);
			var lng = latLng[1].substring(0, latLng[1].length - 1);
			insereItemBD(lat, lng, 4);
			placeDocumento(ll);
			}
		});
	});
</script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVxaX7mFLoz_jvlu_yb0tnTH9FgZ6pXOU&sensor=true"></script>

<script type="text/javascript">

	//<![CDATA[
	
	var customIcons = {
	  PERSONAGEM: {
		icon: 'img/personagem.png',
	  },
	  PLACA: {
		icon: 'img/placa.png',
	  },
	  ITEM: {
		icon: 'img/item.png',
	  },
	  PAGINA: {
		icon: 'img/documento.png',
	  }
	};
	
	var $map;
	var $latlng;
	var $overlay;
	var $marker;
	var markersArray = [];

	function initialize() {
		var $latlng = new google.maps.LatLng(-20.2660457, -40.4218121);
		var myOptions = {
		  zoom: 8,
		  center: $latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  mapTypeControlOptions: {
		  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		  position: google.maps.ControlPosition.TOP_LEFT },
		  zoomControl: true,
		  zoomControlOptions: {
		  style: google.maps.ZoomControlStyle.LARGE,
		  position: google.maps.ControlPosition.LEFT_TOP
		},
		scaleControl: true,
		scaleControlOptions: {
			position: google.maps.ControlPosition.TOP_LEFT
		},
		streetViewControl: false,
		panControl:false,
		};
		
		$map = new google.maps.Map(document.getElementById("map_canvas"),
			myOptions);
			
		google.maps.event.addListener($map, 'click', function(){
			  alert("Vc clicou no mapa");
		  });
		
		overlay = new google.maps.OverlayView();
		overlay.draw = function() {};
			overlay.setMap($map);
		} 
				
		downloadUrl("phpsqlajax_genxml.php", function(data) {
			var xml = parseXml(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
			  var id = markers[i].getAttribute("id");
			  var tipo = markers[i].getAttribute("tipo");
			  var point = new google.maps.LatLng(
				  parseFloat(markers[i].getAttribute("latitude")),
				  parseFloat(markers[i].getAttribute("longitude")));
			  //var html = "" + name + "" + address;
			  var pic = customIcons[tipo] || {};
			  //alert(pic.icon);
			  var infoWindow = new google.maps.InfoWindow({
				  content: '<form><button id="deletaItem" onclick="deletaItemBD();">Apagar Marcador</button><button>Ver Propriedades</button></form>'
			  });
			  $marker = new google.maps.Marker({
				map: $map,
				position: point,
				icon: pic.icon,
				draggable: true,
				id: id
				//shadow: icon.shadow
			  });
			  markersArray.push($marker);
			  //alert($marker.id);
			  google.maps.event.addListener($marker, 'click', function(){
				 infoWindow.open($map, this); 
			  });
			  google.maps.event.addListener($marker, 'dblclick', function(){
			  	alert("Vc clicou num marcador");
		  	  });
			  google.maps.event.addListener($marker, 'dragend', function(){
				 alert("Vc soltou o marcador cujo id no BD eh:" + this.id); 
			  });
			  //bindInfoWindow(marker, map, infoWindow, html);
			}
		  });
		
		//Primeiro placeMarker do código ainda ... 
		function placeMarker(location) {
		  marker = new google.maps.Marker({
			  position: location, 
			  map: $map,
			  icon:'img/placa.png', 
			  draggable: true
		  });
		  google.maps.event.addListener(marker, 'click', function(){
			  	alert("Vc clicou num marcador");
		  		});
		}
		function placePlaca(location) {
		  marker = new google.maps.Marker({
			  position: location, 
			  map: $map,
			  icon:'img/placa.png', 
			  draggable: true
		  });
		  google.maps.event.addListener(marker, 'click', function(){
			  	alert("Vc clicou num marcador");
		  		});
		}
		function placePersonagem(location) {
		  marker = new google.maps.Marker({
			  position: location, 
			  map: $map,
			  icon:'img/personagem.png', 
			  draggable: true
		  });
		  google.maps.event.addListener(marker, 'click', function(){
			  	alert("Vc clicou num marcador");
		  		});
		}
		function placeDocumento(location) {
		  marker = new google.maps.Marker({
			  position: location, 
			  map: $map,
			  icon:'img/documento.png', 
			  draggable: true
		  });
		  google.maps.event.addListener(marker, 'click', function(){
			  	alert("Vc clicou num marcador");
		  		});
		}
		function placeItem(location) {
		  marker = new google.maps.Marker({
			  position: location, 
			  map: $map,
			  icon:'img/item.png', 
			  draggable: true
		  });
			google.maps.event.addListener(marker, 'click', function(){
			  	alert("Vc clicou num marcador");
		  	});
	}
	
	//Funcao para deletar item no BD
	function deletaItemBD(){
		alert("item deletado");	
	}
	
	//Funcao ajax para insercao de uma nova placa
	function insereItemBD(latitude, longitude, tipo){	
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  				xmlhttp=new XMLHttpRequest();
  			}
		else {// code for IE6, IE5
  				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  			}
		xmlhttp.onreadystatechange=function(){
  			if (xmlhttp.readyState==4 && xmlhttp.status==200){
    			document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    		}
  			}

		xmlhttp.open("GET", "insereItemBD.php?lat=" + latitude + "&lng=" + longitude + "&tipo=" + tipo, true);
		xmlhttp.send();
		}
		
	//Funcao que chama o script php gerador de um XML do banco de dados e entrega para a função javascript
	function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request.responseText, request.status);
        }
      };
      request.open('GET', url, true);
      request.send(null);
    }
	
	function parseXml(str) {
      if (window.ActiveXObject) {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
      }
    }

    function doNothing() {}

    //]]>
</script>

</head>
<body onload="initialize()">
<header id="cabecalho">
	<h1 align="center">Aqui colocaremos o cabecalho do editor </h1>
</header>
<nav id="infousuario">
	<h2 align="left">Bibliotecas de Objetos</h2>
</nav>

<aside id="map_canvas"></aside>

<footer id="rodape" align="center">Aqui ficara o rodape</footer>

<div id='menu'>
	<img id="placa" src='img/placa.png'/>
    <img id="personagem" src="img/personagem.png"/>
    <img id="documento" src="img/documento.png" />
    <img id="item" src="img/item.png" />
<div>

</body>
</html>

